<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
<view class="content-box">
	<!-- 编辑 -->
	<view class="edit-box">
		<view class="edit-item flex-row-center" @click="toRegistrationInfo">
			<text class="edit-name">头像</text>
			<view class="edit-content flex-row-center">
				<image :src="userInfo.avatar" class="ava" mode="aspectFill"></image>
				<up-icon name="arrow-right" color="#616365" size="28rpx"></up-icon>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="toRegistrationInfo">
			<text class="edit-name">昵称</text>
			<view class="edit-content">
				<text class="content-text">{{userInfo.nickname}}</text>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="toRegistrationInfo">
			<text class="edit-name">性别</text>
			<view class="edit-content">
				<!-- <text class="content-text" v-if="userInfo.gender">{{userInfo.gender==1?'男':'女'}}</text> -->
				<template v-if="userInfo.gender">
					<text class="content-text" v-if="userInfo.gender==1">男</text>
					<text class="content-text" v-else-if="userInfo.gender==2">女</text>
				</template>
				<text class="content-text" v-else>未知</text>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="toRegistrationInfo">
			<text class="edit-name">地区</text>
			<view class="edit-content">
				<text class="content-text" v-if="userInfo.area">{{userInfo.area}}</text>
				<text class="content-text" v-else>未知</text>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="toRegistrationInfo">
			<text class="edit-name">生日</text>
			<view class="edit-content">
				<text class="content-text" v-if="userInfo.birthday">{{userInfo.birthday}}</text>
				<text class="content-text" v-else>未知</text>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="toAuthentication">
			<text class="edit-name">认证信息</text>
			<view class="edit-content flex-row-center">
				<text class="state" v-if="userInfo.is_authentication">已认证</text>
				<template v-else>
					<text class="state">未认证</text>
					<up-icon name="arrow-right" color="#616365" size="28rpx"></up-icon>
				</template>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="alterPassword">
			<text class="edit-name">修改密码</text>
			<view class="edit-content">
				<up-icon name="arrow-right" color="#616365" size="28rpx"></up-icon>
			</view>
		</view>
		<view class="edit-item flex-row-center" @click="cancelAccont">
			<text class="edit-name">注销账号</text>
			<view class="edit-content">
				<up-icon name="arrow-right" color="#616365" size="28rpx"></up-icon>
			</view>
		</view>
	</view>
	<view class="edit-btn flex-center" @click="logout">
		<text class="text">退出登录</text>
	</view>
</view>
	<up-modal :show="modalshow" @confirm="logout" @cancel="()=>modalshow=false" showCancelButton title="提示"
		content='确定退出登录？'></up-modal>
</template>

<script setup>
	import {
		useLogout
	} from '@/hooks/useLogout.js';
	import {
		userInfoStore
	} from '../../stores/user';
	const userStore = userInfoStore();
	const userInfo = ref({
		avatar: '',
		nickname: '',
		bio: '',
		gender: '',
		birthday: '',
		area: ''
	})
	const modalshow = ref(false);
	onLoad((option) => {})
	onShow(() => {
		if (userStore.userInfo) {
			userInfo.value = userStore.userInfo
		}
	})
	const alterPassword = () => { //修改密码
		uni.navigateTo({
			url: '/pages/login/retrievePassWrod?type=1'
		})
	}
	const logout = () => { //退出登录
		uni.showModal({
			title: '提示',
			content: '确定退出登录？',
			success: function(res) {
				if (res.confirm) {
					useLogout()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const toRegistrationInfo = () => { //修改资料
		uni.navigateTo({
			url: '/page_user/views/registrationInfo?type=1'
		})
	}
	const cancelAccont = () => {
		uni.navigateTo({
			url: '/page_user/views/CancelAccount'
		})
	}
	const toAuthentication = () => { //认证
		if (userInfo.value.is_authentication) return;
		uni.navigateTo({
			url: '/page_user/views/authentication'
		})
	}
</script>


<style lang="scss" scoped>
	.content-box{
		padding-bottom: 24rpx;
	}
	.edit-box {
		width: 710rpx;
		box-sizing: border-box;
		margin:0 auto;
		margin-top: 24rpx;
		background-color: #222528;
		padding: 18rpx 34rpx;
		border-radius: 18rpx;

		.edit-item {
			justify-content: space-between;
			min-height: 144rpx;
			padding: 18rpx 0;
			box-sizing: border-box;

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

			&:not(:last-child) {
				border-bottom: 1rpx solid #666;
			}

			.edit-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #CACBCB;
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.state {
				font-weight: 400;
				font-size: 28rpx;
				color: #CACBCB;
				margin-right: 12rpx;
			}

			.ava {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}

			.content-text {
				font-weight: 500;
				font-size: 28rpx;
				color: #A5A6A7;
			}
		}



	}

	.edit-btn {
		margin: 0 auto;
		margin-top: 120rpx;
		width: 520rpx;
		height: 72rpx;
		border-radius: 36rpx;
		border: 1rpx solid #F56C6C;
		color: #F56C6C;
	}
</style>